<template>
  <view class="page">
    <!-- 使用 z-paging 实现滚动和分页 -->
    <z-paging ref="paging" v-model="positionList" :fixed="true" safe-area-inset-bottom :default-page-size="20"
      :auto-show-back-to-top="true" :refresher-enabled="true" :loading-more-enabled="true" @query="queryList">
      <!-- 顶部固定区域 - 导航栏 + 搜索框 + 名人列表 + 筛选器 -->
      <template #top>
        <view class="top-container">
          <view class="top-content">
            <!-- 自定义导航栏 -->
            <view class="custom-navbar" :style="{ paddingTop: statusBarPx + 'px' }">
              <view class="navbar-content">
                <view class="navbar-left" @click="goBack">
                  <uv-icon name="arrow-left" size="30" color="#333"></uv-icon>
                </view>
                <view class="navbar-title">
                  <text class="title-text">链上侦探</text>
                </view>
                <view class="navbar-right"></view>
              </view>
            </view>

            <!-- 搜索框 -->
            <view class="search-container">
              <view class="search-box">
                <input class="search-input" type="text" v-model="searchAddress" placeholder="输入地址搜索"
                  placeholder-style="color: #909399" @confirm="handleSearch" />
                <view class="search-btn" @click="handleSearch">
                  <text class="search-btn-text">搜索</text>
                </view>
              </view>
            </view>

            <!-- Web3 名人列表 -->
            <view class="celebrity-section">
              <view class="section-header">

                <view class="left-icon"></view>
                <view class="section-title"> 名人聪明钱地址 </view>
              </view>

              <!-- 加载中 -->
              <view v-if="isCelebrityLoading" class="celebrity-loading">
                <uv-loading-icon mode="circle" color="#00d4aa" size="30"></uv-loading-icon>
              </view>

              <!-- 名人列表 -->
              <view v-else-if="celebrityList.length > 0" class="celebrity-list">
                <view class="celebrity-card" v-for="(celebrity, idx) in celebrityList" :key="celebrity.id || idx"
                  @click="onCelebrityClick(celebrity)">
                  <!-- 顶部标题行 -->
                  <view class="card-header">
                    <view class="header-left">
                      <text class="card-title">{{ celebrity.celebrityName }}</text>
                    </view>
                    <text class="track-text">链上追踪地址</text>
                  </view>

                  <!-- 聪明钱地址区域 -->
                  <view class="address-box">
                    <image class="address-icon" src="/static/images/data/left-icon.png" mode="aspectFit" />
                    <view class="address-content">
                      <text class="address-value"> 聪明钱地址： {{ formatAddress(celebrity.publicChainAddress) }}</text>
                    </view>
                  </view>
                </view>
              </view>

              <!-- 空状态 -->
              <view v-else class="celebrity-empty">
                <text class="empty-text">暂无名人数据</text>
              </view>
            </view>

            <!-- 筛选器 -->
            <view class="filter-bar">
              <!-- 方向筛选 -->
              <!-- <view class="filter-item">
              <picker 
                mode="selector" 
                :value="directionIndex" 
                :range="directionOptions" 
                @change="onDirectionChange"
              >
                <view class="picker-view">
                  <text class="picker-text">{{ directionOptions[directionIndex] }}</text>
                  <uv-icon name="arrow-down" size="14" color="#909399"></uv-icon>
                </view>
              </picker>
            </view> -->

              <!-- 币种筛选 -->
              <!-- <view class="filter-item">
              <picker 
                mode="selector" 
                :value="symbolIndex" 
                :range="symbolOptions" 
                @change="onSymbolChange"
              >
                <view class="picker-view">
                  <text class="picker-text">{{ symbolOptions[symbolIndex] }}</text>
                  <uv-icon name="arrow-down" size="14" color="#909399"></uv-icon>
                </view>
              </picker>
            </view> -->

              <!-- 盈亏筛选 -->
              <!-- <view class="filter-item">
              <picker 
                mode="selector" 
                :value="pnlIndex" 
                :range="pnlOptions" 
                @change="onPnlChange"
              >
                <view class="picker-view">
                  <text class="picker-text">{{ pnlOptions[pnlIndex] }}</text>
                  <uv-icon name="arrow-down" size="14" color="#909399"></uv-icon>
                </view>
              </picker>
            </view> -->

              <!-- 资金费率筛选 -->
              <!-- <view class="filter-item">
              <picker 
                mode="selector" 
                :value="fundingIndex" 
                :range="fundingOptions" 
                @change="onFundingChange"
              >
                <view class="picker-view">
                  <text class="picker-text">{{ fundingOptions[fundingIndex] }}</text>
                  <uv-icon name="arrow-down" size="14" color="#909399"></uv-icon>
                </view>
              </picker>
            </view> -->
            </view>
          </view>

          <!-- 表头 -->
          <view class="table-header">
            <text class="th th-rank">#</text>
            <text class="th th-user">用户</text>
            <text class="th th-symbol">币种</text>
            <text class="th th-direction">方向</text>
            <text class="th th-position">仓位</text>
          </view>
        </view>
      </template>

      <!-- 加载动画 -->
      <view v-if="isLoading && positionList.length === 0" class="loading-container">
        <uv-loading-icon mode="circle" color="#00d4aa" size="40"></uv-loading-icon>
        <text class="loading-text">加载中...</text>
      </view>

      <!-- 空状态提示 -->
      <view v-else-if="!isLoading && positionList.length === 0" class="empty-state">
        <text class="empty-text">暂无数据</text>
      </view>

      <!-- 持仓列表 -->
      <view v-else class="position-list">
        <view class="position-item" v-for="(item, idx) in positionList" :key="item.id || idx"
          @click="onItemClick(item)">
          <!-- 排名 -->
          <view class="td td-rank">
            <text class="rank-text">{{ item.rank }}</text>
          </view>

          <!-- 用户地址 -->
          <view class="td td-user" @click.stop="goToDetail(item)">
            <text class="user-text">{{ item.userShort }}</text>
          </view>

          <!-- 币种 -->
          <view class="td td-symbol">
            <image class="coin-icon" :src="item.logoUrl || getCoinIcon(item.symbolCode)" mode="aspectFit" />
            <text class="symbol-text">{{ item.symbolCode }}</text>
          </view>

          <!-- 方向 -->
          <view class="td td-direction">
            <text class="direction-text" :class="item.direction === 'LONG' ? 'long' : 'short'">
              {{ item.direction === 'LONG' ? '多' : '空' }}
            </text>
          </view>

          <!-- 仓位价值 -->
          <view class="td td-position">
            <view class="position-info">
              <text class="position-value">${{ item.positionValueFormat }}</text>
              <text class="position-size">{{ item.positionSizeFormat }} {{ item.symbolCode }}</text>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import { getWhalePosition, getCelebrityList } from '@/api/data'
import { getCurrencies } from '@/api/tactics'

export default {
  data() {
    const sys = uni.getSystemInfoSync()
    const statusBarPx = sys.statusBarHeight || 0

    return {
      statusBarPx,
      positionList: [], // z-paging 数据列表
      allPositionData: [], // 缓存所有数据（用于本地分页和筛选）
      isLoading: false, // 加载状态
      currenciesMap: {}, // 币种映射表（symbol -> logoUrl）

      // 搜索相关
      searchAddress: '', // 搜索的地址

      // Web3 名人列表
      celebrityList: [], // 名人列表（只显示前10条）
      isCelebrityLoading: false, // 名人列表加载状态

      // 筛选器选项
      directionIndex: 0,
      directionOptions: ['全部', '做多', '做空'],

      symbolIndex: 0,
      symbolOptions: ['全部币种', 'BTC', 'ETH', 'SOL', 'XRP', 'ADA', 'DOGE'],

      pnlIndex: 0,
      pnlOptions: ['未实现盈亏', '盈利', '亏损'],

      fundingIndex: 0,
      fundingOptions: ['资金费率', '正费率', '负费率'],

    }
  },

  async onShow() {
    // 先获取币种列表
    // await this.getCurrenciesList()

    // 加载名人列表
    this.loadCelebrityList()
  },

  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack()
    },

    /**
     * 处理搜索
     * @description 用户输入地址后点击搜索，跳转到详情页
     */
    handleSearch() {
      // 去除首尾空格
      const address = (this.searchAddress || '').trim()

      // 验证地址是否为空
      if (!address) {
        uni.showToast({
          title: '请输入地址',
          icon: 'none',
          duration: 2000
        })
        return
      }

      // 基本验证：地址长度至少10个字符（以太坊地址通常是42个字符，但这里做宽松验证）
      if (address.length < 10) {
        uni.showToast({
          title: '地址格式不正确',
          icon: 'none',
          duration: 2000
        })
        return
      }

      // 跳转到详情页，携带地址参数
      uni.navigateTo({
        url: `/subPages/data/celebrity-detail?address=${encodeURIComponent(address)}`
      })
    },

    /**
     * 获取币种列表并建立映射表
     */
    async getCurrenciesList() {
      try {
        const res = await getCurrencies({ pageSize: 10000 })
        console.log('币种列表:', res)

        if (res && res.data && Array.isArray(res.data)) {
          // 建立币种symbol到logoUrl的映射
          this.currenciesMap = {}
          res.data.forEach(currency => {
            this.currenciesMap[currency.symbol] = currency.logoUrl || ''
          })
          console.log('币种映射表:', this.currenciesMap)
        }
      } catch (error) {
        console.error('获取币种列表失败:', error)
      }
    },

    /**
     * 加载 Web3 名人列表（前10条）
     */
    async loadCelebrityList() {
      try {
        this.isCelebrityLoading = true

        // 使用真实API
        const response = await getCelebrityList({
          pageSize: 10,
          pageNo: 1
        })
        console.log('名人列表响应:', response)
        const records = response.data?.records || []

        // 格式化数据
        this.celebrityList = records.map((item, index) => {
          // 处理身份标签（如果是逗号分隔的字符串，转为数组）
          let identityTags = []
          if (item.identityTag) {
            if (typeof item.identityTag === 'string') {
              identityTags = item.identityTag.split(/[,，、]/).filter(tag => tag.trim())
            } else if (Array.isArray(item.identityTag)) {
              identityTags = item.identityTag
            }
          }

          return {
            id: item.id,
            celebrityName: item.celebrityName || '未知',
            identityTag: item.identityTag || '',
            identityTags: identityTags.slice(0, 3), // 最多显示3个标签
            coreDescription: item.coreDescription || '',
            publicChainAddress: item.publicChainAddress || '',
            relatedProject: item.relatedProject || '',
            socialMedia: item.socialMedia || '',
            attentionNote: item.attentionNote || '',
          }
        })

        console.log('格式化后的名人列表:', this.celebrityList)
      } catch (error) {
        console.error('加载名人列表失败:', error)

        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none',
          duration: 2000,
        })
      } finally {
        this.isCelebrityLoading = false
      }
    },

    /**
     * 点击名人卡片
     */
    onCelebrityClick(celebrity) {
      console.log('点击名人:', celebrity)

      // 检查是否有ID
      if (!celebrity.id) {
        uni.showToast({
          title: '该名人数据异常',
          icon: 'none',
          duration: 2000
        })
        return
      }

      // 跳转到详情页，传递名人ID
      uni.navigateTo({
        url: `/subPages/data/celebrity-detail?address=${celebrity.publicChainAddress}`
      })
    },

    /**
     * 方向筛选改变
     */
    onDirectionChange(e) {
      this.directionIndex = e.detail.value
      console.log('方向筛选:', this.directionOptions[this.directionIndex])

      // 应用筛选并刷新列表
      this.applyFilters()
    },

    /**
     * 币种筛选改变
     */
    onSymbolChange(e) {
      this.symbolIndex = e.detail.value
      console.log('币种筛选:', this.symbolOptions[this.symbolIndex])

      // 应用筛选并刷新列表
      this.applyFilters()
    },

    /**
     * 盈亏筛选改变
     */
    onPnlChange(e) {
      this.pnlIndex = e.detail.value
      console.log('盈亏筛选:', this.pnlOptions[this.pnlIndex])

      // 应用筛选并刷新列表
      this.applyFilters()
    },

    /**
     * 资金费率筛选改变
     */
    onFundingChange(e) {
      this.fundingIndex = e.detail.value
      console.log('资金费率筛选:', this.fundingOptions[this.fundingIndex])

      // 应用筛选并刷新列表
      this.applyFilters()
    },

    /**
     * 应用筛选条件
     */
    applyFilters() {
      // 重新加载数据（会触发 queryList 方法）
      if (this.$refs.paging) {
        this.$refs.paging.reload()
      }
    },

    /**
     * z-paging 查询数据方法（本地分页 + 筛选）
     * @param {Number} pageNo - 页码
     * @param {Number} pageSize - 每页数量
     */
    async queryList(pageNo, pageSize) {
      try {
        console.log('请求持仓数据:', { pageNo, pageSize })

        this.isLoading = pageNo === 1

        // 如果是第一页或者没有缓存数据，则重新获取
        if (pageNo === 1 || this.allPositionData.length === 0) {
          // 使用真实API
          const response = await getWhalePosition()
          console.log('持仓数据响应:', response)
          const positionData = response.data || []

          // 格式化数据并缓存
          this.allPositionData = positionData.map((item, index) => {
            // 解析币种代码（去除 -USDT 后缀）
            const symbolCode = (item.symbol || 'BTC-USDT').split('-')[0]

            // 判断方向（根据 positionSize 的正负）
            // positionSize 正数表示做多，负数表示做空
            const positionSizeNum = parseFloat(item.positionSize) || 0
            const direction = positionSizeNum >= 0 ? 'LONG' : 'SHORT'

            // 格式化仓位大小（取绝对值，使用币种数量格式化）
            const positionSizeAbs = Math.abs(positionSizeNum)
            const positionSizeFormat = this.formatCoinAmount(positionSizeAbs)

            // 格式化仓位价值（使用USD价值格式化）
            const positionValueFormat = this.formatNumber(parseFloat(item.positionValueUsd) || 0, 2)

            // 格式化用户地址（只显示前6位和后4位）
            const userShort = this.shortenAddress(item.user)

            // 解析未实现盈亏
            const unrealizedPnl = parseFloat(item.unrealizedPnl) || 0

            // 解析资金费率
            const fundingFee = parseFloat(item.fundingFee) || 0

            return {
              id: item.id || `${item.user}-${item.symbol}-${index}`,
              rank: index + 1, // 排名
              user: item.user || '0x0000...0000',
              userShort: userShort,
              symbol: item.symbol || 'BTC-USDT',
              symbolCode: symbolCode,
              logoUrl: item.logoUrl || '',
              direction: direction,
              positionSize: positionSizeNum,
              positionSizeFormat: positionSizeFormat,
              positionValueUsd: parseFloat(item.positionValueUsd) || 0,
              positionValueFormat: positionValueFormat,
              entryPrice: item.entryPrice || '0',
              markPrice: item.markPrice || '0',
              liqPrice: item.liqPrice || '0',
              leverage: item.leverage || '1',
              marginBalance: item.marginBalance || '0',
              unrealizedPnl: unrealizedPnl,
              fundingFee: fundingFee,
              marginMode: item.marginMode || 'cross',
              createTime: item.createTime || Date.now(),
              updateTime: item.updateTime || Date.now(),
            }
          })

          console.log('格式化后的数据:', this.allPositionData.length, '条')
        }

        // 应用筛选条件
        let filteredData = this.allPositionData

        // 方向筛选
        if (this.directionIndex === 1) { // 做多
          filteredData = filteredData.filter(item => item.direction === 'LONG')
        } else if (this.directionIndex === 2) { // 做空
          filteredData = filteredData.filter(item => item.direction === 'SHORT')
        }

        // 币种筛选
        if (this.symbolIndex > 0) {
          const selectedSymbol = this.symbolOptions[this.symbolIndex]
          filteredData = filteredData.filter(item => item.symbolCode === selectedSymbol)
        }

        // 盈亏筛选
        if (this.pnlIndex === 1) { // 盈利
          filteredData = filteredData.filter(item => item.unrealizedPnl > 0)
        } else if (this.pnlIndex === 2) { // 亏损
          filteredData = filteredData.filter(item => item.unrealizedPnl < 0)
        }

        // 资金费率筛选
        if (this.fundingIndex === 1) { // 正费率
          filteredData = filteredData.filter(item => item.fundingFee > 0)
        } else if (this.fundingIndex === 2) { // 负费率
          filteredData = filteredData.filter(item => item.fundingFee < 0)
        }

        // 按仓位价值降序排序
        filteredData.sort((a, b) => b.positionValueUsd - a.positionValueUsd)

        // 重新计算排名
        filteredData = filteredData.map((item, index) => ({
          ...item,
          rank: index + 1
        }))

        // 本地分页：从筛选后的数据中获取当前页数据
        const startIndex = (pageNo - 1) * pageSize
        const endIndex = startIndex + pageSize
        const pageData = filteredData.slice(startIndex, endIndex)

        console.log(`第${pageNo}页数据:`, {
          startIndex,
          endIndex,
          pageDataLength: pageData.length,
          totalLength: filteredData.length
        })

        // 完成加载
        this.$refs.paging.complete(pageData)
      } catch (error) {
        console.error('加载持仓数据失败:', error)

        // 加载失败
        this.$refs.paging.complete(false)

        uni.showToast({
          title: error.message || '加载失败，请重试',
          icon: 'none',
          duration: 2000,
        })
      } finally {
        this.isLoading = false
      }
    },

    /**
     * 格式化数字（使用中文单位：亿、万）- 用于USD价值
     * @param {Number} num - 数字
     * @param {Number} decimals - 小数位数
     * @returns {String} 格式化后的字符串
     */
    formatNumber(num, decimals = 2) {
      if (isNaN(num)) return '0'

      const absNum = Math.abs(num)

      // 1亿以上
      if (absNum >= 100000000) {
        return (num / 100000000).toFixed(2) + '亿'
      }
      // 1万以上
      else if (absNum >= 10000) {
        return (num / 10000).toFixed(2) + '万'
      }
      // 小于1万
      else {
        return num.toFixed(decimals)
      }
    },

    /**
     * 格式化币种数量（使用中文单位：万）
     * @param {Number} num - 数字
     * @returns {String} 格式化后的字符串
     */
    formatCoinAmount(num) {
      if (isNaN(num)) return '0'

      const absNum = Math.abs(num)

      // 1万以上
      if (absNum >= 10000) {
        return (num / 10000).toFixed(2) + '万'
      }
      // 小于1万，保留2位小数
      else {
        return num.toFixed(2)
      }
    },

    /**
     * 缩短地址（只显示前6位和后4位）
     * @param {String} address - 地址
     * @returns {String} 缩短后的地址
     */
    shortenAddress(address) {
      if (!address || address.length < 10) return address || '未知'

      return `${address.slice(0, 6)}...${address.slice(-4)}`
    },

    /**
     * 格式化地址（显示前30位+省略号）
     * @param {String} address - 地址
     * @returns {String} 格式化后的地址
     */
    formatAddress(address) {
      if (!address) return '暂无地址'
      if (address.length <= 35) return address

      return `${address.slice(0, 35)}...`
    },

    /**
     * 获取币种图标（备用方案）
     * @param {String} symbol - 币种符号
     * @returns {String} 图标URL
     */
    getCoinIcon(symbol) {

      // 默认图标
      return '/static/images/data/coin.png'
    },

    /**
     * 点击条目
     */
    onItemClick(item) {
      console.log('点击持仓:', item)

      // 显示详细信息
      uni.showModal({
        title: `${item.symbolCode} 持仓详情`,
        content: `用户: ${item.user}\n方向: ${item.direction === 'LONG' ? '做多' : '做空'}\n仓位: ${item.positionSizeFormat} ${item.symbolCode}\n价值: $${item.positionValueFormat}\n杠杆: ${item.leverage}x\n入场价: $${item.entryPrice}\n标记价: $${item.markPrice}\n清算价: $${item.liqPrice}\n保证金: $${item.marginBalance}\n未实现盈亏: $${item.unrealizedPnl}\n资金费率: $${item.fundingFee}\n保证金模式: ${item.marginMode === 'cross' ? '全仓' : '逐仓'}`,
        showCancel: false,
        confirmText: '知道了'
      })
    },

    /**
     * 跳转到用户详情页
     */
    goToDetail(item) {
      console.log('跳转到用户详情:', item)

      // 跳转到详情页，传递完整的用户地址
      uni.navigateTo({
        url: `/subPages/data/celebrity-detail?address=${encodeURIComponent(item.user)}`
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
}

/* 顶部容器 */
.top-container {
  background: transparent;
}

/* 自定义导航栏 */
.custom-navbar {
  background: linear-gradient(180deg, #e0fffe 0%, rgba(224, 255, 254, 0.95) 100%);
  backdrop-filter: blur(10px);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
}

.navbar-left {
  width: 100rpx;
}

.navbar-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-right {
  width: 100rpx;
}
.top-content{
  background: linear-gradient(#e0fffe, #f8f8f8);
}
.left-icon{
  width: 5rpx;
  height: 36rpx;
  background: #00d4aa;
  margin-right: 10rpx;
}
.title-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 搜索容器 */
.search-container {
  padding: 24rpx;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  height: 72rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 36rpx;
  border: 1px solid rgba(6, 203, 182, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
  backdrop-filter: blur(10px);

  &:focus-within {
    border-color: #00d4aa;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 212, 170, 0.15);
  }
}

.search-input {
  flex: 1;
  height: 100%;
  padding: 0 24rpx;
  padding-right: 120rpx; // 为搜索按钮留出空间
  background: transparent;
  font-size: 28rpx;
  color: #303133;
  border: none;
  outline: none;
}

.search-btn {
  position: absolute;
  right: 6rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  padding: 0 24rpx;
  background: linear-gradient(135deg, #00d4aa 0%, #06CBB6 100%);
  border-radius: 30rpx;
  transition: all 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;

  &:active {
    transform: translateY(-50%) scale(0.95);
  }
}

.search-btn-text {
  font-size: 26rpx;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

/* Web3 名人列表区域 */
.celebrity-section {
  padding: 24rpx;
  margin-bottom: 2rpx;
}

.section-header {
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 8rpx;
}

.title-icon {
  font-size: 32rpx;
  line-height: 1;
}

.title-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #303133;
}

.section-subtitle {
  font-size: 24rpx;
  color: #909399;
  padding-left: 40rpx;
}

/* 名人列表加载 */
.celebrity-loading {
  display: flex;
  justify-content: center;
  padding: 60rpx 0;
}

/* 名人列表滚动容器 */
.celebrity-scroll {
  width: 100%;
  white-space: nowrap;
}

.celebrity-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
  padding: 8rpx 0;
}

/* 名人卡片 */
.celebrity-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 20rpx;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rpx;
  background: #ffffff;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex: 1;
}

.coin-icon {
  // width: 48rpx;
  // height: 48rpx;
  // border-radius: 8rpx;
  flex-shrink: 0;
  // border: 2rpx solid #e8e8e8;
  // padding: 8rpx;
}

.card-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}

.track-text { 
  font-size: 24rpx;
  color: #999999;
  white-space: nowrap;
}

/* 地址区域 */
.address-box {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  padding: 10rpx;
  background: #E6FAF8;
  margin: 0;
  border-radius: 10rpx;
}

.address-icon {
  width: 40rpx;
  height: 40rpx;
  flex-shrink: 0;
  margin-top: 4rpx;
}

.address-content {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  flex: 1;
  min-width: 0;
}

.address-label {
  font-size: 26rpx;
  color: #333333;
  font-weight: 500;
  line-height: 1.4;
}

.address-value {
  font-size: 28rpx;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 空状态 */
.celebrity-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60rpx 0;
}

.empty-text {
  font-size: 26rpx;
  color: #c0c4cc;
}



/* 筛选栏 */
.filter-bar {
  /* 筛选功能已隐藏 */
  display: none;
}

.filter-item {
  flex: 1;
  min-width: 0;
}

.picker-view {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6rpx;
  padding: 12rpx 16rpx;
  background: #f5f7fa;
  border-radius: 8rpx;
  transition: all 0.2s ease;

  &:active {
    opacity: 0.7;
    background: #e8eaed;
  }
}

.picker-text {
  font-size: 24rpx;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 表头 */
.table-header {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(6, 203, 182, 0.1);
  backdrop-filter: blur(10px);
}

.th {
  font-size: 24rpx;
  font-weight: 600;
  color: #909399;
  text-align: center;
}

.th-rank {
  width: 80rpx;
  text-align: left;
}

.th-user {
  flex: 1;
  min-width: 150rpx;
  text-align: left;
}

.th-symbol {
  width: 120rpx;
}

.th-direction {
  width: 80rpx;
}

.th-position {
  flex: 1;
  min-width: 140rpx;
  text-align: right;
}

/* 加载和空状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 120rpx 0;
  gap: 20rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #00d4aa;
  font-weight: 500;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #c0c4cc;
}

/* 列表容器 */
.position-list {
  background: transparent;
}

/* 持仓条目 */
.position-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(6, 203, 182, 0.08);
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);

  &:active {
    background: rgba(249, 250, 251, 0.95);
  }
}

.td {
  display: flex;
  align-items: center;
  font-size: 26rpx;
}

/* 排名 */
.td-rank {
  width: 80rpx;
  justify-content: flex-start;
}

.rank-text {
  font-size: 26rpx;
  color: #606266;
  font-weight: 500;
}

/* 用户地址 - 可点击，绿色下划线 */
.td-user {
  flex: 1;
  min-width: 150rpx;
  justify-content: flex-start;
  cursor: pointer;
  transition: all 0.3s ease;

  &:active {
    opacity: 0.7;
    transform: scale(0.98);
  }
}

.user-text {
  font-size: 24rpx;
  color: #00d4aa;
  font-family: 'Courier New', monospace;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #00d4aa;
  text-underline-offset: 4rpx;
  transition: all 0.3s ease;
}

/* 币种 */
.td-symbol {
  width: 120rpx;
  justify-content: center;
  gap: 8rpx;

  .coin-icon {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    background: #f5f7fa;
  }
}

.symbol-text {
  font-size: 26rpx;
  font-weight: 600;
  color: #303133;
}

/* 方向 */
.td-direction {
  width: 80rpx;
  justify-content: center;
}

.direction-text {
  font-size: 26rpx;
  font-weight: 600;
}

.direction-text.long {
  color: #4ba980;
}

.direction-text.short {
  color: #eb3061;
}

/* 仓位 */
.td-position {
  flex: 1;
  min-width: 140rpx;
  justify-content: flex-end;
}

.position-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rpx;
}

.position-value {
  font-size: 28rpx;
  font-weight: 700;
  color: #303133;
}

.position-size {
  font-size: 22rpx;
  // color: #909399;
}
</style>
